<template>
    <div id="preview" class="form-upload deptConf preview" :class="shape" :style="{width: width+'px',height: height+'px'}">
        <el-upload
            ref="upload"
            class="avatar-uploader"
            :action="url"
            name="uploadFile"
            :data="uploadData"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            accept="image/*">
            上传
        </el-upload>
        <img v-if="imageUrl" :src="imageUrl" :height='height' :width='width' :style="{'object-fit': mode}">
        <img v-else-if="!imageUrl && showDefault" src="../../img/frame/default-user.jpg" :height='height' :width='width' :style="{'object-fit': mode}">
        <i v-else class="fa fa-plus center"></i>
        <i v-if="!!imageUrl && showRemove" class="el-icon-error" @click.stop="deletePic"></i>
    </div>
</template>

<script>
    import baseURL from '@/utils/baseURL'
    export default {
        props: {
            height: { // 自定义高度
                type: [Number, String],
                default: 50
            },
            width: { // 自定义宽度
                type: [Number, String],
                default: 50
            },
            value: { // v-model
                type: String,
                default: ''
            }, 
            url: { // 上传路径
                type: String,
                default: '/api/api-sys/sys/atth/upload'
            },
            limit: { // 上传大小限制
                type: Number,
                default: 10
            },
            shape: { // 样式 圆形 circle，方形 square
                type: String,
                default: 'circle'
            },
            showDefault: { // 是否默认显示头像
                type: Boolean,
                default: false,
            },
            disabled: { // 是否禁用
                type: Boolean,
                default: false
            },
            showRemove: { // 是否显示删除按钮
                type: Boolean,
                default: true,
            },
            mode: {
                type: String,
                default: 'fill'
            }
        },
        data() {
            return {
                uploadData: {
                    token: this.$store.state.token.token,
                },
                baseURL
            };
        },
        computed: {
            imageUrl: {
                get() {
                    return this.value;
                },
                set(val) {
                    this.$emit('input', val);
                }
            },
        },
        methods: {
            beforeAvatarUpload(file) {
                let limit = 1024 * 1024 * this.limit;
                if(file.type.indexOf('image') == -1) {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: '只能上传图片类型文件！'
                    })
                    return false
                }
                if(file.size > limit) {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: '图片大小不能超过'+ this.limit +'M'
                    })
                    return false
                }
                return true
            },
            handleAvatarSuccess(res, file) {
                if(res.code == 1000) {
                    this.$notify({
                        title: '提示',
                        type: 'success',
                        message: '图片上传成功！'
                    })
                    this.imageUrl = baseURL.fileURL + (res.data.maxUrl || res.data.htmlUrl);
                    this.$nextTick(() => {
                        this.$emit('change', this.imageUrl);
                    })
                }else {
                    this.$notify({
                        title: '提示',
                        type: 'error',
                        message: '上传失败'
                    })
                }
            },
            deletePic() {
                this.imageUrl = '';
            },
        }
    }

</script>
<style lang="scss" scoped>
    .preview{
        position: relative;
        cursor: pointer;
        &.circle{
            border: 1px dashed #ddd;
            border-radius: 50%;
            img {
                border-radius: 50%;
                overflow: hidden;
            }
        }
        &.square{
            border: 1px dashed #ddd;
        }
        /deep/ .avatar-uploader{
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 5;
        }
        /deep/ .avatar-uploader .el-upload{
            z-index: 5;
            opacity: 0;
            width: 100%;
            height: 100%;
        }
        img{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 0;
        }
        i.center{
            position: absolute;
            width: 14px;
            height: 14px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            font-size: 14px;
            color: #ddd;
            text-align: center;
        }
        i.el-icon-error {
            display: none;
            position: absolute;
            right: -5px;
            top: -5px;
            z-index: 10;
            background: #fff;
            border-radius: 50%;
            overflow: hidden;
            &:hover {
                color: red;
            }
        }

        &:hover {
            i.el-icon-error {
                display: block;
            }
        }
    }
</style>
